<template>
  <div>
    <div id="myChart4" :style="{width: '422px', height: '300px'}"></div>
  </div>
</template>

<script>
export default {
    props: {
        
    },
    data() {
        return {
            
        }
    },
	mounted() {
		this.drawLine()
	},
    methods: {
		drawLine(){
			var chartDom = document.getElementById('myChart4');
			let myChart4 = this.$echarts.init(chartDom)
			// 绘制图表
			myChart4.setOption({
				
				tooltip: {},
				  legend: {
					type: "plain",
					show: true,
					right: "9%",
					orient: "horizontal",
					align: "auto",
					icon: "circle",
					itemWidth:5,
					itemHeight:5,
					textStyle: {
					    color:['#F7534F','#58DC9F','#555D9B'],
					}
				  },
				  xAxis: {
				    data: ["中央权威", "主流媒体", "地方站点", "核心财经", "社交平台", "自媒体大V", "境外媒体"],
					axisLabel: {
						show: true,
						rotate: 45,
						fontSize: 10,
						color:'#D9FFFFFF',
						margin: 30,
						align: "center",
					}
				  },
				  yAxis: {
					  name:'报道数(百篇)',	//y轴名称
				  },
				  series: [{
				    name: "敏感报道",
				    type: "bar",
				    data: [5, 20, 36, 10, 10, 20, 4],
				    backgroundStyle: {},
					itemStyle: {
						color: "#F7534F"
					},
				    label: {
					  position: "top",
					  fontWeight: "bold",
					  color:'#FFFFFF',
					  fontSize: 16,
				    },
					stack:"1",
					barWidth:20,
				  },{
				    name: "正面报道",
				    type: "bar",
				    data: [5, 20, 36, 10, 10, 20, 4],
				    backgroundStyle: {},
					itemStyle: {
						color: "#555D9B"
					},
				    label: {
					  position: "top",
					  fontWeight: "bold",
					  color:'#FFFFFF',
					  fontSize: 16,
				    },
					stack:"1",
					barWidth:20,
				  },{
				    name: "中性报道",
				    type: "bar",
				    data: [5, 20, 36, 10, 10, 20, 4],
				    backgroundStyle: {},
					itemStyle: {
						color: "#34D58A"
					},
				    label: {
				      show: true,
					  position: "top",
					  fontWeight: "bold",
					  color:'#FFFFFF',
					  fontSize: 16,
				    },
					stack:"1",
					barWidth:20,
				  }]
			});
		}
    }
}
</script>
<style scoped lang="scss">
	#myChart4{
		margin: 0 auto;
	}
</style>
